<template>
  <div>
    <commonTable :columns="columns" :data="tableData" :pager="page" @handleSizeChange="handleSizeChange" 
      @handleCurrentChange="handleCurrentChange">
      <el-table-column slot="table_oper" align="center" label="操作" width="150" :resizable="false">
          <template slot-scope="scope">
              <el-button class="edit-bgc" icon="el-icon-edit" @click="editTableData(scope.row)">修改</el-button>
          </template>
      </el-table-column>
    </commonTable>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {prop: 'date', label: '日期', width: '150', align: 'left'},
        {prop: 'name', label: '姓名', width: '200', align: 'center', formatter: this.formatter},
        {prop: 'address', label: '地址', align: 'right'}
      ],
      tableData: [],
      page: {
        pageNo: 1,
        limit: 1,
        sizes: [1,5,10, 50, 100],
        total: 0
      }
    }
  },
  mounted() {
    this.tableData = [
        {date: '2022-05-02', name: '张珊', address: '上海市普陀区金沙江路1518弄'}, 
        {date: '2022-07-04', name: '李斯', address: '深圳市福田区越海家园碧海阁'}, 
        {date: '2022-09-01', name: '王武', address: '深圳市罗湖区太平洋大厦11楼'}, 
        {date: '2022-10-03', name: '赵丽', address: '深圳市罗湖区爱国路金通大厦'},
        {date: '2022-11-03', name: '夏天', address: '深圳市罗湖区爱国路金通大厦'}
      ];
    this.page.total = this.tableData.length;
  },
  methods: {
    // 重新渲染name列
    formatter(row, column, cellValue) {
      return row.name;
    },
    // 改变页面大小处理
    handleSizeChange(val) {
      
    },
    // 翻页处理
    handleCurrentChange(val) {
      
    },
    editTableData(row) {}
  }
}
</script>